<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
        <el-button type="primary" plain @click="goToSeeHotBar">去看贴吧排行</el-button>
        <el-button type="primary" plain @click="goToSeeHotPosts">去看帖子排行</el-button>
        <el-button type="primary" plain @click="goToSeeMyLike">我点赞过的帖子</el-button>
    </el-row>
    <h2>欢迎您</h2>
    <el-row>
        <el-button type="primary" plain @click="StartAdd">创建一个属于自己的贴吧</el-button>
    </el-row>
    <el-form :inline="true" :model="bar" class="demo-form-inline">

        <el-form-item label="贴吧名称">
            <el-input v-model="bar.barName" placeholder="贴吧名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="barName" label="贴吧名字" align="center"></el-table-column>
        <el-table-column prop="nowNumber" label="现关注的人数" align="center"></el-table-column>
        <el-table-column prop="ownerName" label="吧主名" align="center"></el-table-column>
        <el-table-column prop="created_at" align="center" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="" @click="goToThisBar(scope.row)">前往该贴吧</el-button>
                    <el-button type="danger" @click="unFollow(scope.row)">取关</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页工具条 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
    <el-dialog title="创建贴吧确认框" :visible.sync="log" width="40%">
        <el-form ref="form" :model="bar" label-width="80px">
            <el-form-item label="贴吧名称">
                <el-input  v-model="bar.barName" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBar">提交</el-button>
                <el-button @click="log = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                log:false,
                DialogVisible:false,
                totalCount: 1,
                pageSize: 5,
                currentPage: 1,
                tableData: [],
                bar:{
                    id:'',
                    barName:'',
                    nowNumber:'',
                    ownerName:'',
                    created_at:''
                }
            }
        },
        mounted() {
            this.selectFocusBar();
        },
        methods: {
            selectFocusBar() {
                var _this=this

                axios.get("http://localhost:8080/BarSystem/User/selectFocusBar" + location.search + "&CurrentPage=" + this.currentPage + "&PageSize=" + this.pageSize)
                    .then(resp => {
                        _this.tableData = [];
                        if (typeof resp.data === 'object' && resp.data!== null){
                            _this.tableData.push(resp.data);}else{
// 使用split方法将字符串按照"}"分割成数组
                            const responseDataArray = resp.data.split('}').map(item => {
                                if (item) return JSON.parse(item + '}');
                                else return null;
                            }).filter(item => item !== null);

// 根据数组长度判断是否为单个对象或多个对象组成的数组
                            if (responseDataArray.length === 1) {
                                // 如果数组长度为1，则直接解析JSON数据
                                _this.tableData = responseDataArray[0];
                            } else {
                                // 如果数组长度大于1，则将整理后的数据添加到tableData中
                                _this.tableData = _this.tableData.concat(responseDataArray);
                            }}
                    })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },
            goToNewPage() {
                window.location.href = 'MyPost.html'+location.search;
            },
            goToChange() {
                window.location.href = 'login.jsp';
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectFocusBar();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectFocusBar();
            },
            goToThisBar(row) {
                const barName = row.barName;
                // 直接拼接完整的URL路径
                var _this=this
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/User/goToThisBar"+location.search+"&barName="+barName+"",
                }).then(resp => {
                    window.location.href = resp.data;
                })

            },

            unFollow(row) {
                // 实现取消关注的逻辑
                // 可以通过axios向后端发送请求来处理
                console.log('取消关注', row);
            },
            onSubmit() {
                var _this=this
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/User/selectBar"+location.search,
                    data:_this.bar,
                }).then(resp => {
                    window.location.href = resp.data;
                })
            },
            StartAdd(){
                var _this = this
                _this.log= true;
            },
            addBar(){
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/BarSystem/User/addBar" + location.search, // 确保URL路径正确
                    data: _this.bar,
                })
                    .then((resp) => {
                        if (resp.data === "success") {
                            this.$message({
                                message: '恭喜你。成功创建了自己的贴吧,点击下方的查询即可前往',
                                type: 'success'
                            });
                            this.log = false;
                        }else{
                            this.$message({
                                message: '抱歉，贴吧名已经存在>_<',
                                type: 'warning'
                            });
                            this.log = false;

                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });

            },
            goToSeeMyLike(){
                window.location.href = 'MyLikeComment.html'+location.search;
            },
            goToSeeHotBar(){
                window.location.href = 'HotBar.html'+location.search;
            },
            goToSeeHotPosts(){
                window.location.href = 'HotPost.html'+location.search;
            }
        }
    });
</script>
</body>
</html>
